<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
  <view class="page">
    <template v-if="info.id">
      <div class="info-head">
        <div class="flex">
          <view class="font-w-600 u-font-30 flex-w-1 u-m-r-20 u-line-3">
            {{ info.product_name }}，{{ info.batch_name }}/{{
              info.batch_number
            }}
          </view>
          <view
            @click="get_historyPlus"
            class="color-999 u-font-24"
            style="line-height: 40rpx"
          >
            历史记录
            <text class="iconfont icon-arrow-right u-font-20"> </text>
          </view>
        </div>

        <div class="flex u-font-24 u-m-t-20 u-m-b-10 color-999">
          当前流程：
          <text class="font-w-600 color-333 u-m-r-24">
            {{ info.product_batch_current_count + 1 }}/{{
              info.product_batch_list[info.product_batch_current_count]
                .process_name
            }}
          </text>
          溯源流程：
          <text class="font-w-600 color-333">
            {{ info.product_batch_total_count }}
          </text>
        </div>
        <div class="flex u-font-24">
          我的任务：
          <text class="font-w-600 color-333"> {{ info.process_name }} </text>
        </div>

        <scroll-view class="u-m-t-30 scroll-x" scroll-x style="">
          <div class="list">
            <div
              :class="[
                'item',
                i < info.product_batch_current_count && 'active',
                info.product_batch_also_count +
                  info.product_batch_current_count ==
                  i && 'my-active',
              ]"
              v-for="(it, i) in info.product_batch_list"
              :key="i"
            >
              <div class="text-box u-p-t-20">
                {{ it.process_name }}
              </div>

              <!-- 白色小三角，第一个和最后一个盒子不显示 -->
              <div
                v-if="
                  info.product_batch_also_count +
                    info.product_batch_current_count ==
                  i
                "
                class="iconfont icon-map-filling1"
              ></div>
              <div
                
                class="jiantou"
              ></div>
            </div>
          </div>
        </scroll-view>
      </div>

      <!-- <view class="info_head">
        <view class="info_top">
          <view class="info_top_left">
            当前{{ info.batch_name ? info.batch_name : '暂无' }}
          </view>
          <view class="info_top_right">
            {{ info.batch_number ? info.batch_number : '' }}
          </view>
        </view>
        <view class="info_msg_head">
          <view class="info_msg">
            <template v-if="info.process_name && info.process_name.length > 0">
              <view class="info_msg_title">
                {{ info.process_name }}
              </view>
              <view class="info_msg_content">
                {{ info.product_batch_current_count }}<view>当前</view>·
                {{ info.product_batch_total_count }}<view>全部</view>
              </view>
              <view class="info_msg_name">
                {{ info.batch_name }}
              </view>
            </template>
            <template v-else>
              <view class="info_msg_title">暂无</view>
            </template>
          </view>
          <view class="info_msgs">
            <template
              v-if="info.process_name && info.product_batch_also_count == 0"
            >
              <text
                class="iconfont icon-shangchuanbeiandanzheng"
                @click="get_fillIn()"
              ></text>
              <view class="info_msgs_title" @click="get_fillIn()">
                填写溯源
              </view>
              <view class="info_msgs_content" @click="get_fillIn()">
                暂未到步骤
              </view>
            </template>
            <template v-else>
              <view class="info_msgs_titles"> 没有可填写的溯源 </view>
              <view class="info_msgs_"> 去看看记录 </view>
              <view class="info_msgs_but" @click="get_record()">
                查看记录
              </view>
            </template>
          </view>
        </view>
        <view class="scorll_head" v-if="info.product_batch_list.length > 0">
          <scroll-view :scroll-x="true" class="scorllView">
            <div class="scroll-box">
              <block
                v-for="(item, index) in info.product_batch_list"
                :key="index"
              >
                <view
                  class="scroll_item"
                  :style="index == 0 ? 'margin-left: 15rpx;' : ''"
                >
                  <view :class="item.state == 0 ? 'h_xians' : 'h_xian'">
                    <view
                      :class="item.state == 0 ? 'qiu_plus' : 'qiu'"
                      v-if="index == 0"
                    ></view>
                    <text
                      class="iconfont icon-arrow-right jian"
                      v-if="index != 0"
                    ></text>
                    <view
                      :class="item.state == 0 ? 'qius_plus' : 'qius'"
                      v-if="index == info.product_batch_list.length - 1"
                    ></view>
                  </view>
                  <view
                    :class="
                      item.state == 0
                        ? 'item_contents_pluss'
                        : 'item_contents_plus'
                    "
                  >
                    {{ item.process_name }}
                  </view>
                </view>
              </block>
            </div>
          </scroll-view>
        </view>
      </view> -->

      <List :list="list" @get_info="get_info" @get_record="get_record"></List>

      <div class="page-footer">
        <view class="mode_but_head">
          <view
            class="mode_but"
            v-if="!info.product_batch_also_count && info.process_name"
            @click="get_fillIn()"
          >
            填写溯源记录
          </view>
          <view
            v-else
            class="mode_but"
            :style="{ backgroundColor: '#f2f2f2', color: '#8c8c8c' }"
          >
            暂无法填写溯源纪录
          </view>
        </view>
      </div>
    </template>
    <u-empty mode="data" v-else></u-empty>
  </view>
</template>
<script>
import List from './components/list.vue';
import source from '../../api/source/index.js';
export default {
  components: {
    List,
  },
  data() {
    return {
      show_type: false,
      list: [],
      info: {},
      product_batch_process_id: 0,
      product_batch_id: 0,
    };
  },
  created(e) {},
  onShow() {
    this.get_my_product_batch_process();
  },
  methods: {
    get_record() {
      uni.navigateTo({
        url: '../record/record',
      });
    },
    get_historyPlus() {
      uni.navigateTo({
        url:
          '../historyPlus/historyPlus?product_batch_id=' +
          this.product_batch_id,
      });
    },
    //填写溯源
    get_fillIn() {
      uni.navigateTo({
        url:
          '../fillSource/fillSource?product_batch_process_id=' +
          this.product_batch_process_id,
      });
    },
    //点击列表
    get_info(item) {
      this.info = item;
      this.product_batch_process_id = item.product_batch_process_id;
      this.product_batch_id = item.product_batch_id;
    },
    get_my_product_batch_process() {
      source.my_product_batch_process().then(res => {
        if (res.code == 0) {
          this.list = res.data.list;
          this.info = res.data.list[0];
          this.product_batch_process_id =
            res.data.list[0].product_batch_process_id;
          this.product_batch_id = res.data.list[0].product_batch_id;
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none',
          });
        }
      });
    },
    get_null() {},
    get_show() {
      this.show_type = !this.show_type;
    },
  },
};
</script>
<style scoped lang="scss">
.page {
  .info-head {
    padding: 30rpx 24rpx;
    background: #fff;

    .scroll-x {
      .list {
        padding: 24rpx;
        display: flex;

        .item {
          position: relative;
          min-width: 152rpx;
          width: 152rpx;
          border-top: 12rpx solid #f2f2f2;

          &:nth-child(1) {
            &::after {
              content: '';
              position: absolute;
              top: -6rpx;
              left: 0;
              z-index: 9;
              width: 20rpx;
              height: 20rpx;
              background: #f2f2f2;
              border-radius: 50%;
              transform: translate(-50%, -50%);
            }
          }
          &:nth-last-child(1)::after {
            content: '';
            position: absolute;
            top: -6rpx;
            left: 0;
            z-index: 100;
            width: 20rpx;
            height: 20rpx;
            background: #f2f2f2;
            border-radius: 50%;
            transform: translate(-50%, -50%);
          }
          .text-box {
            margin-left: -20rpx;
            width: 40rpx;
            color: #8c8c8c;
          }

          .jiantou {
            position: absolute;
            top: -14rpx;
            right: -2rpx;
            z-index: 9;
            border: 6rpx solid #fff;
            border-left-color: transparent;
            border-bottom-color: transparent;
            transform: rotate(45deg);
            width: 18rpx;
            height: 18rpx;
          }

          .icon-map-filling1 {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 100;

            transform: translate(-50%, -100%);
            font-size: 40rpx;
            color: #333;
            background: #fff;
          }
        }

        .active {
          border-top-color: #f0250e;
          .text-box {
            color: #f0250e;
          }
          &:nth-child(1)::after {
            background: #f0250e;
          }
          &:nth-last-child(1)::after {
            background: #f0250e;
          }
        }

        .my-active {
          .text-box {
            font-size: 36rpx;
            font-weight: 600;
            color: #333;
          }
        }
      }
    }
  }
}

.page-footer {
  height: calc(100rpx + env(safe-area-inset-bottom));
  .mode_but_head {
    width: 100%;
    height: calc(100rpx + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    position: fixed;
    right: 0;
    bottom: 0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;

    .mode_but {
      width: 90%;
      height: 80rpx;
      background: #f0250e;
      border-radius: 90rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }
  }
}
.info_msgs_but {
  width: 240rpx;
  height: 68rpx;
  border-radius: 90rpx;
  background: #fcedeb;
  font-size: 30rpx;
  color: #f0250e;
  text-align: center;
  line-height: 68rpx;
  font-weight: 600;
  margin-top: 30rpx;
}
.info_msgs_ {
  font-size: 24rpx;
  color: #8c8c8c;
  margin-top: 8rpx;
}

/* 底部列表 */
.scroll-box {
  display: flex;
}

.uni-scroll-view-content {
  display: flex !important;
}

.jian {
  width: 12rpx;
  height: 12rpx;
  position: absolute;
  left: 0rpx;
  top: 0rpx;
  color: #fff;
  font-weight: 900;
  font-size: 11rpx;
}

.item_contents {
  color: #8c8c8c;
  font-size: 28rpx;
  writing-mode: tb-rl;
  margin-top: 14rpx;
  margin-left: -16rpx;
}

.item_content {
  color: #f0250e;
  font-size: 28rpx;
  writing-mode: tb-rl;
  margin-top: 14rpx;
  margin-left: -16rpx;
}

.item_contents_pluss {
  color: #8c8c8c;
  font-size: 28rpx;
  writing-mode: tb-rl;
  margin-top: 14rpx;
  margin-left: -8rpx;
}

.item_contents_plus {
  color: #f0250e;
  font-size: 28rpx;
  writing-mode: tb-rl;
  margin-top: 14rpx;
  margin-left: -8rpx;
}

.qius_plus {
  width: 22rpx;
  height: 22rpx;
  border-radius: 90rpx;
  position: absolute;
  right: -2rpx;
  top: -6rpx;
  background: #f2f2f2;
}

.qius {
  width: 22rpx;
  height: 22rpx;
  border-radius: 90rpx;
  position: absolute;
  right: -2rpx;
  top: -6rpx;
  background: #f0250e;
}

.qiu_plus {
  width: 22rpx;
  height: 22rpx;
  border-radius: 90rpx;
  position: absolute;
  left: -2rpx;
  top: -6rpx;
  background: #f2f2f2;
}
.qiu {
  width: 22rpx;
  height: 22rpx;
  border-radius: 90rpx;
  position: absolute;
  left: -2rpx;
  top: -6rpx;
  background: #f0250e;
}

.h_xians {
  width: 152rpx;
  height: 12rpx;
  background: #f2f2f2;
  position: relative;
}

.h_xian {
  width: 152rpx;
  height: 12rpx;
  background: #f0250e;
  position: relative;
}

.scroll_item {
  display: inline-block;
  margin-top: 20rpx;
}

.scorllView {
  width: 100%;
  white-space: nowrap;
  /* display: flex; */
}

.scorll_head {
  width: 95%;
  margin: 0 auto;
  margin-top: 50rpx;
}

/* 步骤条 */
.info_msgs_content {
  font-size: 24rpx;
  color: #8c8c8c;
}
.info_msgs_titles {
  font-size: 30rpx;
  color: #262626;
  font-weight: 600;
  margin-top: 40rpx;
}
.info_msgs_title {
  font-size: 30rpx;
  color: #262626;
  font-weight: 600;
  margin-top: 20rpx;
}

.icon-shangchuanbeiandanzheng {
  /* width: 53rpx;
		height: 68rpx; */
  font-size: 70rpx;
  margin-top: 68rpx;
  background-image: linear-gradient(#fa9b6f, #fa8a89);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.info_msgs {
  width: 320rpx;
  height: 260rpx;
  border-radius: 25rpx;
  background: #fff;
  box-shadow: 0 0 10rpx #c1c1c1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.info_msg_name {
  padding-top: 8rpx;
  padding-left: 24rpx;
  font-size: 26rpx;
}

.info_msg_content view {
  padding-top: 8rpx;
  font-size: 32rpx;
  font-weight: 600;
}

.info_msg_content {
  padding-top: 8rpx;
  padding-left: 24rpx;
  font-size: 44rpx;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.info_msg_title {
  padding-top: 60rpx;
  padding-left: 24rpx;
  font-size: 36rpx;
  font-weight: 600;
}

.info_msg {
  width: 320rpx;
  height: 260rpx;
  border-radius: 25rpx;
  background-image: linear-gradient(#f22407, #f84d17);
  box-shadow: 0 0 10rpx #f00;
  color: #fff;
}

.info_msg_head {
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
}

.info_top {
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  padding: 30rpx 0;
  font-size: 30rpx;
  color: #000000;
  font-weight: 600;
}

.info_head {
  width: 100%;
  background: #fff;
  border-bottom-left-radius: 25rpx;
  padding-bottom: 30rpx;
  border-bottom-right-radius: 25rpx;
}

.page {
  background: rgb(242, 242, 242);
  min-height: 100vh;
  width: 100%;
}
</style>
